<template>
	<div class="wrap">
		<h1 class="title">通告栏</h1>
		<el-row class="search">
			<el-space alignment="start" :size="10">
				<span>楼栋：</span>
				<el-input v-model="searchText" @keydown.enter="handleSearchForNotice" />
				<el-button class="btn" @click="handleSearchForNotice">
					<el-icon><Search /></el-icon> 搜索</el-button
				>
				<el-button class="btn" @click="reset">清空</el-button>

				<el-button class="btn" @click="showAddDialog = true"
					><el-icon><CirclePlusFilled /></el-icon> &nbsp;发布通告</el-button
				>
			</el-space>
		</el-row>

		<NoticeTable :notice-data="noticeDate" @mod="handleModNotice" @del="handleDelNotice" :flag="true"/>
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total,size, prev, pager, next"
				:total="noticeTotal"
				@size-change="handelPageSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
	<DeleteDialog v-model:show="showDelDialog">
		<template #containt>
			{{ delTarget.noticeContent }}
		</template>
		<template #btn>
			<el-button type="danger" link @click="showDelDialog = false">取消</el-button>
			<el-button type="primary" link @click="handleDel">确定删除</el-button>
		</template>
	</DeleteDialog>

	<!-- 修改弹框 -->
	<el-dialog v-model="showModDialog" title="修改公告" width="500">
		<el-form :label-width="100" >
			<el-row :gutter="20">
				<el-col :span="10">
					<el-form-item label="公告编号">
						<el-input v-model.number="modtarget.noticeId" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="10" :offset="4">
					<el-form-item label="公告楼栋">
						<el-input v-model.number="modtarget.buildId" readonly />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col>
					<el-form-item label="公告内容">
						<el-input v-model.trim="modtarget.noticeContent" type="textarea" resize="none" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<el-button type="primary" plain @click="handleMod">提交</el-button>
			<el-button type="danger" plain @click="showModDialog = false">取消</el-button>
		</template>
	</el-dialog>

	<!-- 发布公告弹出框 -->
	<el-dialog v-model="showAddDialog" title="发布公告" width="500">
		<el-form :label-width="100" :model="addNotice">
			<el-row :gutter="20">
				<el-col>
					<el-form-item label="公告楼栋">
						<el-select v-model.number="addNotice.buildId">
							<el-option v-for="i in 20" :key="i" :label="`${i} 栋`" :value="i" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col>
					<el-form-item label="公告内容">
						<el-input v-model="addNotice.noticeContent" type="textarea" resize="none" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<el-button type="primary" plain @click="handleAddNotice">提交</el-button>
			<el-button type="danger" plain @click="showAddDialog = false">取消</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from 'vue'
import {
	getAllNoticeByMaster,
	searchNoticeByBuildId,
	delNoticeByMan,
	addNoticeByMan,
	updateNoticeByMan,
} from '@/utils/axios/master'

import { debounce } from '@/utils/tools'
import DeleteDialog from '@/components/dialog/DeleteDialog.vue'
import { Search } from '@element-plus/icons'

import NoticeTable from '@/components/mod/NoticeTable.vue'
import { getNoticeAll } from '@/utils/axios/getTotal'

// 表格数据
const noticeDate = ref([])

const pageSizes=ref([10,20,30])
const currentPage = ref(1)
const pageSize = ref(10)
const showDelDialog = ref(false)
const showModDialog = ref(false)
const showAddDialog = ref(false)

// 通告总数
const noticeTotal = ref(0)

// 防抖延迟
const delay = 500
// 搜索内容
const searchText = ref('')

// 需要删除的公共内容
const delTarget = ref({})
// 需要修改的公告内容
const modtarget = ref({})
// 需要发布的公告内容
const addNotice = reactive({
	noticeContent: '',
	buildId: '',
})


// 重置
const reset=async()=>{
	await init(currentPage.value)
	searchText.value=""
}
// 处理添加公告
const handleAddNotice = debounce(async () => {
	await addNoticeByMan(addNotice)
	await init(currentPage.value)
	addNotice.buildId = ''
	addNotice.noticeContent = ''
	await nextTick()
	showAddDialog.value = false
}, delay)
// 处理修改公告事件
const handleModNotice = (val) => {
	// console.log(val);
	modtarget.value = val
	showModDialog.value = true
}
// 处理删除公告事件
const handleDelNotice = (val) => {
	delTarget.value = val
	showDelDialog.value = true
}
const handleDel = debounce(async () => {
	await delNoticeByMan({ noticeId: delTarget.value.noticeId })
	await init(currentPage.value)
	await nextTick()
	showDelDialog.value = false
}, delay)
const handleMod = debounce(async () => {
	await updateNoticeByMan(modtarget.value)
	await nextTick()
	showModDialog.value = false
}, delay)

// 处理当前页变化
const handleCurrentChange = async (val) => {
	let { data } = await getAllNoticeByMaster({ currentPage: val ,pageSize:pageSize.value})
	noticeDate.value=data
}

const handelPageSizeChange= async(val)=>{
	let { data } = await getAllNoticeByMaster({ currentPage: currentPage.value ,pageSize:val})
	noticeDate.value=data
}
// 搜索事件
const handleSearchForNotice = debounce(async () => {
	let data
	if (!searchText.value) {
		;({ data } = await getAllNoticeByMaster({ currentPage: currentPage.value }))
		noticeDate.value = data
		return
	}
	;({ data } = await searchNoticeByBuildId({ currentPage: currentPage.value, buildId: searchText.value }))
	noticeDate.value = data
}, delay)

async function init(curr,size=10) {
	let { data } = await getAllNoticeByMaster({ currentPage: curr ,pageSize:size})
	let res = await getNoticeAll()
	console.log(data);
	noticeTotal.value = res.data
	noticeDate.value = data
	await nextTick()
}

onMounted(async () => {
	await init(currentPage.value)
})
</script>

<style scoped lang="scss">
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.search {
	margin-bottom: 15px;
}

</style>
